<template>
	<view class="container">
		<view class="scroll-view">
		  <scroll-view class="scroll-view-content" scroll-x>
		    <view class="item" v-for="(item, index) in list" :key="index" :class="{'navActive':item.id==navId}" @click="chooseNav(item)">{{ item.classifyTitle }}</view>
		  </scroll-view>
		</view>
		<view class="content">
			<block v-for="item,index in chooseData" :key="item.id">
				<view class="content-item" @click="navAiMake(item.id)">
					<view style="margin:26rpx 20rpx;">
						<image :src="'https://media.ousukeji.com/'+item.iconUrl" style="height: 60rpx;width: 60rpx;"></image>
						<view style="font-size: 36rpx;color: #333;margin-top: 16rpx;">
						    {{item.title}}
						</view>
						<view style="font-size: 28rpx;color: #666;margin-top: 16rpx;">
						    {{item.subTitle}}
						</view>
					</view>
					
				</view>
				
			</block>
			
		</view>
	</view>
	
</template>

<script>
import Http from '../../utils/http'
const http = new Http()
	export default {
		data() {
			return {
				list:[],
				navId:0,
				allData:[],
				chooseData:[]
			}
		},
		onLoad() {
			this.getList()
		},
		methods: {
			getList(){
				this.allData = []
				this.list = []
				http.get("v1/aiCopywriting/list").then(res=>{
					// this.list = res.data.data
					var arr = []
					res.data.data.forEach(item=>{
						item.smartFormsList.forEach(two=>{
							arr.push(two)
						})
						
					})
					res.data.data.unshift({
						id:0,
						classifyTitle:"全部",
						smartFormsList:arr
					})
					this.chooseData = arr
					this.allData = arr
					this.list = res.data.data
					console.log("===>",res.data.data);
				})
			},
			chooseNav(item){
				this.navId = item.id
				this.chooseData = item.smartFormsList
				console.log();
			},
			navAiMake(id){
				uni.navigateTo({
					url:"/subpkg/aiMake/aiMake?id="+id
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	page{
		background: #f1f1f1;
	}
.scroll-view {
  width: 100%;
  height: 100rpx; /* 设置高度，根据实际需求调整 */
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
  background: #fff;
}

.scroll-view-content {
  white-space: nowrap; /* 让内容水平排列，不换行 */
}

.item {
  display: inline-block;
  width: 140rpx; /* 设置每个项目的宽度，根据实际需求调整 */
  height: 100%;
  line-height: 100rpx; /* 垂直居中 */
  text-align: center;
  border-bottom: 1px solid #fff;
  font-size: 32rpx;
}
.item:nth-child(1){
	margin-left: 20rpx;
}
.navActive{
	font-weight: bold;
	border-bottom: 1rpx solid #00008B;
}
.content{
	display: flex;
	justify-content: space-between;
	padding-top: 140rpx;
	flex-wrap: wrap;
	margin: 0 20rpx;
	.content-item{
		width: 48%;
		background: #fff;
		height: 280rpx;
		border-radius: 12rpx;
		margin-bottom: 30rpx;
		
	}
}
</style>
